<template>
	<view class="page">
		<topVue title="LP"></topVue>
		<view class="banner margin20 relative">
			<text style="font-size: 32rpx; bottom: 0; font-weight: 600;" class="absolute-center">LP信息</text>
		</view>

		<view class="dataVue margin40 flex">
			<view class="data flex-column flex-between align-center">
				<view class="label">总添加数</view>
				<view class="value">{{ totalLP }}</view>
			</view>
			<view class="line"></view>
			<view class="data flex-column flex-between align-center">
				<view class="label">我的总添加数</view>
				<view class="value">{{ userLP }}</view>
			</view>
		</view>

		<view class="addFlu margin30" @click="$tools.route('./addFlu')">添加流动性</view>
		<view class="removeFlu margin30" @click="$tools.route('./removeFlu', userLP)">移除流动性</view>

		<image src="../../static/lp/banner_b.png" class="margin30" style="display: block; width: 670rpx;height: 124rpx;"></image>

		<view class="listVue margin50">
			<view class="tabVue flex">
				<view class="tab" :class="{active: current===0}" @click="tabChange(0)">收益记录</view>
				<view class="tab" :class="{active: current===1}" @click="tabChange(1)">LP记录</view>
			</view>
			<view class="thVue flex margin40 padding-row30">
				<view class="li w25">类型</view>
				<view class="li w25">数量</view>
				<view class="li text-right w50">时间</view>
			</view>
			<view class="tdVue flex padding-row30" v-for="(item ,index) in list" :key="index">
				<view class="li w25">{{item.typeStr}}</view>
				<view class="li w25">{{item.amount}}</view>
				<view class="li text-right w50">{{item.createTime}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				userLP: 0,
				totalLP: 0,
				pageNum: 1,
				pageSize: 10,
				list: [],
				isLastPage: false
			};
		},

		async onShow() {
			this.list = []
			await this.getInfo()
			await this.getList()
		},

		async onReachBottom() {
			if(this.isLastPage) return
			this.pageNum++
			await this.getList()
		},

		methods: {
			tabChange(index){
				this.current = index
				this.pageNum = 1
				this.list = []
				this.getList()
			},

			async getInfo(){
				const res = await this.$request("/front/lp/lpInfo")
				if(res.code===0) {
					console.log(res)
					this.userLP = res.data.userLP
					this.totalLP = res.data.totalLP
				}
			},

			async getList(){
				let url = ["/front/lp/lpDividendRecord", "/front/lp/lpRecord"]
				const res = await this.$request(url[this.current], {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				})
				if(res.code===0) {
					this.list = this.list.concat(res.data.list)
					this.isLastPage = res.data.isLastPage
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.listVue {
		width: 670rpx;
		padding-bottom: 30rpx;
		.thVue {
			width: 670rpx;
			height: 78rpx;
			background: rgba(255,255,255,0.1);
			border-radius: 8rpx;
			.li {
				//width: 33.33333%;
				height: 78rpx;
				line-height: 78rpx;
				color: rgba(255,255,255,0.6);
			}
		}
		.tdVue {
			width: 670rpx;
			height: 78rpx;
			border-radius: 8rpx;
			.li {
				//width: 33.33333%;
				height: 78rpx;
				line-height: 78rpx;
				color: rgba(255,255,255,0.6);
			}
		}
		.tdVue:nth-child(2n) {
			background: rgba(255,255,255,0.03);
		}

		.tabVue {
			width: 670rpx;
			height: 98rpx;
			background: rgba(255,255,255,0.1);
			border-radius: 49rpx;
			.tab {
				width: 335rpx;
				height: 98rpx;
				text-align: center;
				line-height: 98rpx;
				font-size: 36rpx;
				color: rgba(255,255,255,0.6);
			}
			.active {
				background: linear-gradient( 270deg, #49BA29 0%, #C5DF24 100%);
				color: #0F0F13;
				border-radius: 49rpx;
				font-weight: 600;
			}
		}
	}
	.banner {
		width: 670rpx;
		height: 124rpx;
		background: url("../../static/lp/banner_t.png") no-repeat;
		background-size: 100% 100%;
	}

	.addFlu,.removeFlu {
		width: 670rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
	}
	.addFlu {
		background: url("../../static/lp/1.png") no-repeat;
		background-size: 100% 100%;
	}
	.removeFlu {
		background: url("../../static/lp/2.png") no-repeat;
		background-size: 100% 100%;
	}

	.dataVue {
		width: 670rpx;
		height: 120rpx;
		.data {
			width: 50%;
			height: 120rpx;
			padding: 15rpx 0;
			.label {
				color: rgba(255,255,255,0.6);
				font-size: 32rpx;
				line-height: 1;
			}
			.value {
				font-weight: 600;
				font-size: 40rpx;
				line-height: 1;
			}
		}
		.line {
			width: 1rpx;
			height: 120rpx;
			background: rgba(255,255,255,0.4);;
		}
	}
</style>
